@import '~@styles/common.less';

.TocDrawer {
  position: fixed;
  bottom: -100%;
  left: 0;
  width: 100%;
  min-height: 350px;
  background-color: @fff;
  transition: all 0.3s ease-in-out;
  z-index: 101;

  .mack {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgba(0, 0, 0, 0.45);
    transition: all 0.3s;
  }

  .mackNav {
    position: relative;
    background-color: @background;
    z-index: 102;

    .tocTitle {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      height: 40px;
      border-bottom: 1px solid @background;
      background-color: @fff;
    }

    .scrollbar {
      & > :first-child {
        // 如何禁止子元素滚动触发父元素滚动
        overscroll-behavior: contain;
      }
    }
  }

  .tocText {
    font-weight: 500;
    font-size: 16px;
    color: #1d2129;
    border-bottom: 1px solid #e4e6eb;
    padding: 10px;
  }

  .tocList {
    text-align: left;
    background-color: @fff;
    min-height: 350px;
  }

  :global(.markdown-navigation .title-anchor) {
    padding: 0 5px 0 10px;
    font-size: 14px;
    .ellipsis();
  }

  :global(.markdown-navigation .title-anchor small) {
    font-size: 14px;
    margin: 0 0.8em 0 0;
  }

  :global(.markdown-navigation .title-anchor.active) {
    position: relative;
    color: @menu-active;

    &::after {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      content: '';
      width: 4px;
      height: 18px;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      background-color: @menu-active;
    }
  }

  :global(.markdown-navigation) {
    :global(.title-level4) {
      color: @font-2;
      padding-left: 20px;
    }
    :global(.title-level5) {
      color: @font-2;
      padding-left: 20px;
    }
    :global(.title-level6) {
      color: @font-2;
      padding-left: 20px;
    }
  }
}

.showTocDrawer {
  bottom: -1px;
  transition: all 0.3s ease-in-out;

  .mack {
    height: 100%;
    transition: all 0.6s;
  }
}

.dark {
  .mack {
    background-color: @dark-mask;
  }

  .mackNav {
    background-color: @dark-bgc-deep;

    .tocTitle {
      background-color: @dark-bgc-deep;
      color: @dark-fc;
    }
  }

  .tocList {
    background-color: @dark-bgc-deep;
    color: @dark-fc;
  }

  :global {
    .markdown-navigation .title-anchor.active {
      position: relative;
      color: @dark-fc;
      background-color: @dark-gray;

      &::after {
        background-color: @menu-active;
      }
    }

    .markdown-navigation {
      :global(.title-level3) {
        color: @dark-fc;
      }
      :global(.title-level4) {
        color: @dark-fc;
      }
      :global(.title-level5) {
        color: @dark-fc;
      }
      :global(.title-level6) {
        color: @dark-fc;
      }
    }
  }
}
